<template>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
    </div>
    <div class="panel-body">
      <form class="form-inline" role="form" style="float:left;">
        <div class="form-group has-feedback">
          <div class="input-group">
            <div class="input-group-addon">查询条件</div>
            <input v-model="queryText" class="form-control has-success" type="text" placeholder="请输入查询条件">
          </div>
        </div>
        <button  @click="queryUser" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
      </form>
      <button type="button" @click="toremoves" class="btn btn-danger"  style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
      <button type="button" class="btn btn-primary" style="float:right;" @click="toadd"><i class="glyphicon glyphicon-plus"></i> 新增</button>
      <br>
      <hr style="clear:both;">
      <div class="table-responsive">
        <form id="userForm">
          <table class="table  table-bordered">
            <thead>
            <tr >
              <th width="30">#</th>
              <th width="30"><input type="checkbox" v-model="allSelectStatus"></th>
              <th>账号</th>
              <th>名称</th>
              <th>邮箱地址</th>
              <th width="100">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(user,index) in userInfos" :key="index">
              <td>{{index+1}}</td>
              <td><input type="checkbox" v-model="user.status"></td>
              <td>{{user.loginacct}}</td>
              <td>{{user.username}}</td>
              <td>{{user.email}}</td>
              <td>
                <button type="button" @click="toassignRole(user.id)" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>
                <button type="button" @click="toEdit(user.id)" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>
                <button type="button" @click="toremove(user.id)" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>
              </td>
            </tr>
            </tbody>
            <tfoot>
            <tr >
              <td colspan="6" align="center">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageno"
                  :page-sizes="[5, 10, 20, 30]"
                  :page-size="pagesize"
                 layout="total, sizes, prev, pager, next, jumper"
                 :total="total">
                </el-pagination>
              </td>
            </tr>
            </tfoot>
          </table>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  mounted () {
    this.pageQuery()
  },
  data () {
    return {
      pageno: 1,
      pagesize: 5,
      total: 0, // 总条数
      pagenototal: 0, // 总页数
      queryText: '',
      userInfos: [],
      allSelectStatus: false
    }
  },
  methods: {
    // 发送请求请求分页数据
    pageQuery () {
      let jsondata = this.$qs.stringify({
        pageno: this.pageno,
        pagesize: this.pagesize,
        queryText: this.queryText
      })
      axios.post('/api/user/getPageInfo', jsondata).then((response) => {
        const res = response.data.data // 真实数据
        console.log(res)
        this.userInfos = res.datas
        // 给每个数据加上一个属性
        /*
        this.userInfos = res.datas.map(user => ({
          sataus: true
        }))
        */
        this.userInfos.forEach(user => {
          user.status = false // 默认状态都为false
        })
        this.total = res.total
        this.pagenototal = res.pagenototal
      }).catch(function (error) {
        console.log(error)
      })
    },
    queryUser () {
      this.pageno = 1
      this.pageQuery()
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.pageQuery()
    },
    handleCurrentChange (val) {
      this.pageno = val
      this.pageQuery()
    },
    toadd () {
      let id = 0
      this.$router.push({path: `/layout/bottom/center/user/addoredit/${id}`})
    },
    toEdit (id) {
      this.$router.push({path: `/layout/bottom/center/user/addoredit/${id}`})
    },
    toremove (id) {
      // 是否删除
      axios.post('/api/user/remove/' + id).then((response) => {
        const res = response.data.data
        const success = response.data.success
        if (success) {
          this.pageQuery()
        }
        console.log(res)
      }).catch(function (error) {
        console.log(error)
      })
    },
    toremoves () {
      // 查询是否有选中的单项 过滤  返回user状态为true的选项
      // const userInfos2 = this.userInfos.filter(user => user.status)
      // console.log(userInfos2)
      let userids = ''
      this.userInfos.forEach(user => {
        if (user.status) {
          // userids.push(user.id)
          userids = userids + 'userids=' + user.id + '&'
        }
      })
      userids = userids.substring(0, userids.length - 1)
      if (userids.length > 0) {
        axios.post('/api/user/removes', userids).then((response) => {
          // const res = response.data.data
          const success = response.data.success
          if (success) {
            this.pageQuery()
          }
        }).catch(function (error) {
          console.log(error)
        })
      }
    },
    toassignRole (id) {
      this.$router.push({path: `/layout/bottom/center/user/AssignRole/${id}`})
    }
  },
  watch: {
    allSelectStatus: {
      deep: true, // 深度监视
      handler: function (val) { // 新值和老值
        if (this.userInfos.length > 0) {
          this.userInfos.forEach(user => {
            user.status = val
          })
        }
      }
    }
  }
}

</script>
<style></style>
